<template>
	<div class="system-user-dialog-container">
		<el-dialog v-model="dialog.visible" :title="dataForm.id ? '修改角色' : '新增角色'" :close-on-click-modal="false" draggable>
			<el-form ref="dataFormRef" :model="dataForm" :rules="dataRules" label-width="auto" v-loading="dialog.loading">
				<el-row :gutter="35">
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="角色编码" prop="code">
							<el-input v-model="dataForm.code" placeholder="请输入角色编码" clearable></el-input>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="角色名称" prop="name">
							<el-input v-model="dataForm.name" placeholder="请输入角色名称" clearable></el-input>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="状态" prop="status">
							<el-switch v-model="dataForm.status" active-value="0" inactive-value="1"></el-switch>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
						<el-form-item label="描述" prop="description">
							<el-input v-model="dataForm.description" type="textarea" placeholder="请输入描述" maxlength="150"></el-input>
						</el-form-item>
					</el-col>
				</el-row>
			</el-form>
			<template #footer>
				<span class="dialog-footer">
					<el-button size="default" @click="dialog.visible = false">取 消</el-button>
					<el-button size="default" type="primary" :loading="dialog.loading" @click="onSubmit">{{ dataForm.id ? '修 改' : '新 增' }}</el-button>
				</span>
			</template>
		</el-dialog>
	</div>
</template>

<script lang="ts" name="systemRoleForm" setup>
import { reactive, ref, nextTick } from 'vue';
import { useRoleApi } from '/@/api/system/role';
import { ElMessage } from 'element-plus';

// 定义子组件向父组件传值/事件
const emit = defineEmits(['refresh']);

// 定义变量内容
const dataFormRef = ref();

const dialog = reactive({
	visible: false,
	loading: false,
});

const dataForm = reactive({
	id: '', // id
	code: '', // 角色编码
	name: '', // 角色名称
	status: '0', // 状态，0正常，1禁用
	description: '', // 描述
});

const dataRules = ref({
	code: [
		{ required: true, message: '编码不能为空', trigger: 'blur' },
		{ min: 3, max: 20, message: '编码长度必须介于 3 和 20 之间', trigger: 'blur' },
	],
	name: [
		{ required: true, message: '名称不能为空', trigger: 'blur' },
		{ min: 2, max: 10, message: '名称长度必须介于 2 和 10 之间', trigger: 'blur' },
	],
});

// 打开弹窗
const openDialog = async (id: string) => {
	// 清空表单，此项需加表单验证才能使用
	nextTick(() => {
		dataFormRef.value?.resetFields();
	});

	dataForm.id = id;
	dialog.visible = true;

	if (id) {
		dialog.loading = true;
		const res = await useRoleApi().info(id);
		if (res.code == 200) {
			Object.assign(dataForm, res.data);
			dialog.loading = false;
		} else {
			dialog.loading = false;
			dialog.visible = false;
		}
	}
};

// 提交
const onSubmit = async () => {
	const valid = await dataFormRef.value.validate().catch(() => {});
	if (!valid) return false;

	try {
		dialog.loading = true;
		let res = null;
		if (dataForm.id) {
			res = await useRoleApi().edit(dataForm);
		} else {
			res = await useRoleApi().add(dataForm);
		}

		if (res.code == 200) {
			ElMessage.success(res?.msg);
		}
	} catch (error: any) {
		ElMessage.error(error.message);
	} finally {
		dialog.loading = false;
		dialog.visible = false;
		emit('refresh');
	}
};

// 暴露变量
defineExpose({
	openDialog,
});
</script>
